<template>
  <view class="clock-page">
    <view v-if="clocks.length === 0" class="no-clock">
      暂无打卡记录
    </view>

    <scroll-view scroll-y style="height: calc(100vh - 100rpx);">
      <view v-for="clock in clocks" :key="clock.id" class="clock-item">
        <view class="clock-row">
          <text class="label">用户：</text>
          <text class="value">{{ clock.userName }}</text>
        </view>
        <view class="clock-row">
          <text class="label">打卡时间：</text>
          <text class="value">{{ clock.time }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: uni.getStorageSync('xm-user') || {},
      clocks: []
    };
  },
  onShow() {
    this.loadClocks();
  },
  methods: {
    loadClocks() {
      if (!this.user.id) {
        uni.showToast({ title: '未登录', icon: 'none' });
        return;
      }
      this.$request.get('/clock/selectAll', {userId: this.user.id}).then(res => {
        if (res.code === '200') {
          this.clocks = res.data || [];
        } else {
          uni.showToast({ title: res.msg || '查询失败', icon: 'none' });
        }
      }).catch(err => {
        console.error('查询失败:', err);
        uni.showToast({ title: '网络异常', icon: 'none' });
      });
    }
  }
};
</script>

<style scoped>
.clock-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.no-clock {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 50rpx;
}

.clock-item {
  background-color: #fff;
  padding: 25rpx;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.clock-row {
  display: flex;
  margin-bottom: 15rpx;
}

.label {
  font-weight: bold;
  width: 220rpx;
  color: #333;
}

.value {
  color: #666;
  flex: 1;
}
</style>
